import React,{Component} from 'react'
import { Checkbox, Row, Col,Icon } from 'antd'
import '../css/prolist.css' 
import { Pagination } from 'antd';
import * as api from '../api/detailPro'
import {NavLink} from 'react-router-dom'
import {navs} from '../data/proList'
export default class ProList extends Component{
    constructor(props){
        super(props)
        this.state={
            list:[],
            proList:[],
            id:0
        }
    }
    onChange(checkedValues) {
      console.log('checked = ', checkedValues);
    }
    move(index){
        let els = document.getElementsByClassName('pro_tit')
          let targetEl = els[index]
          targetEl.style.color='rgb(224, 182, 119)' 
          let arr = this.state.list
          arr[index].coverImg = arr[index].coverImg.replace(/1.jpg/,'2.jpg')
          this.setState({
              list:arr
          })
    }
    leave(index){
      let els = document.getElementsByClassName('pro_tit')
      let targetEl = els[index]
      targetEl.style.color='#333'
      let arr = this.state.list
      arr[index].coverImg = arr[index].coverImg.replace(/2.jpg/,'1.jpg')
      this.setState({
          list:arr
      })
    }
    componentDidMount(){
        let id = this.props.match.params.id
        let arr = navs[id].data
        let num = this.props.location.search.indexOf('=')
        let pid = parseInt(this.props.location.search.charAt(num+1))
        let els = document.getElementsByClassName('list_item')
        this.setState({
            proList:arr,
            id:pid
        })
        if(arr[id] == undefined||arr[id].data == undefined){
            let allProducts = []
            arr.map(v=>{
                api.getProduct({per:100,product_category:v.id}).then(data=>{
                    data.data.products.map(v=>allProducts.push(v))
                    this.setState({
                        list:allProducts
                    })
                    console.log(this.state.list)
                    els[pid].style.background="#ddd"
                })
            })
        }else{
            let products = arr[0].data
            let allProducts = []
            products.map(v=>{
                api.getProduct({per:100,product_category:v.id}).then(data=>{
                    data.data.products.map(v=>allProducts.push(v))
                    this.setState({
                        list:allProducts
                    })
                    els[pid].style.background="#ddd"
                })
            })
        }
        
        
    }
    onSel(index){
        console.log(index)
        let arr = this.state.proList
        console.log(arr)
        let allProducts = []
        console.log(arr[index])
        if(arr[index].data == undefined){
            api.getProduct({per:100,product_category:arr[index].id}).then(data=>{
                console.log(data)
                this.setState({
                    list:data.data.products
                })
            })
        }else{
            let products =arr[index].data
            products.map(v=>{
                api.getProduct({per:100,product_category:v.id}).then(data=>{
                    data.data.products.map(v=>allProducts.push(v))
                    this.setState({
                        list:allProducts
                    })
                })
            })
        }
        
        let els = document.getElementsByClassName('list_item')
        for(let i=0;i<els.length;i++){
            els[i].style.background = 'none'
        }
        els[index].style.background = '#ddd'
        
    }
    render(){
        return(
            <div className="pro-content">
                <div className="sidebar">
                    <ul>
                        {
                            this.state.proList.map((v,i)=>{
                                return(
                                    <li className="list_item" style={{lineHeight:'24px'}} key={v.id}>
                                        <button 
                                        onClick={()=>this.onSel(i)} 
                                        style={{width:'100%',background:'none',border:'0',padding:'4px 8px'}}>{v.name}</button>
                                    </li>
                                )
                            })
                        }
                    </ul>
                    <div className="size">
                        <h2>尺寸筛选</h2>
                        <p>服饰类</p>
                        <Checkbox.Group style={{ width: '100%' }} onChange={this.onChange.bind(this)}>
                         <Row>
                           <Col >
                             <Checkbox value="A">S</Checkbox>
                           </Col>
                           <Col >
                             <Checkbox value="B">M</Checkbox>
                           </Col>
                           <Col>
                             <Checkbox value="C">L</Checkbox>
                           </Col>
                           <Col>
                             <Checkbox value="D">XL</Checkbox>
                           </Col>
                         </Row>
                         </Checkbox.Group>
                    </div>   
                </div>
                <div className="sideRight">
                    <div className="titleChoose">
                        <div>
                            <h3>排序：</h3>
                            <p>默认</p>
                            <p>进店</p>
                            <p class="upSize">价格&nbsp;&nbsp;&nbsp;&nbsp;<Icon type="arrow-up" /><Icon type="arrow-down" style={{margin:'0'}} /></p>
                        </div>
                        <div>
                            <h3>显示：</h3>
                            <p>30</p>
                            <p>90</p>
                            <Pagination simple defaultCurrent={2} total={50} />
                            <span style={{background:'#aaa',color:'#fff'}}>GO</span>
                        </div>
                    </div>
                    <div className="every_one">
                        {
                            this.state.list.map((item,i)=>{
                                return(
                                    <NavLink key={i} to={"/detail/"+item._id}>
                                         <dl>
                                            <dt><img  onMouseEnter={()=>this.move(i)} onMouseLeave={()=>this.leave(i)} className="image" src={item.coverImg} /></dt>
                                             <dd>
                                                <div className="pro_tit">
                                                <p>TRENDIANO</p>
                                                <p>{item.name}</p>
                                                </div>
                                            <p className="priceDouble">￥299<span>￥599</span></p>   
                                            </dd>
                                        </dl>
                                    </NavLink>
                                   
                                )
                            })
                        }
                        
                      
                    </div>
                    <div className="yefoot">
                        <Pagination defaultCurrent={1} total={40} />
                        <span>GO</span>
                    </div>
                    
                </div>  
            </div>
        )
    }
}